<template>
  <div :style="{ backgroundColor: backgroundColor }" class="app-container home">
    <el-row :gutter="10" style="height: 60vh ">
      <el-col :span="18" class="card-box">
        <el-card style="height: 55vh">
          <!-- <div style="height: 100%">地图</div> -->
          <img v-if="logo" :src="logo" class="responsive-img" />
        </el-card>
      </el-col>

      <!-- <el-col :xs="24" :sm="24" :md="12" :lg="8">
      <el-card class="update-log">-->
      <el-col :span="6" class="card-box">
        <el-card style="height: 26.5vh">
          <span>计划完成率</span>

          <div ref="myChart1" style="height: 160px" />
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card style="height: 26.5vh">
          <span>缺陷样本库统计</span>

          <div ref="myChart2" style="height: 160px" />
        </el-card>
      </el-col>
      <el-col :span="9" class="card-box">
        <el-card style="height: 26.5vh">
          <span>巡检计划任务统计</span>

          <div ref="myChart4" style="height: 160px" />
        </el-card>
      </el-col>
      <el-col :span="9" class="card-box">
        <el-card style="height: 26.5vh">
          <span>巡检工单统计</span>

          <div ref="myChart5" style="height: 160px" />
        </el-card>
      </el-col>
      <el-col :span="6" class="card-box">
        <el-card style="height: 26.5vh">
          <span>巡检数据统计</span>

          <div ref="myChart3" style="height: 160px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import gis from "@/assets/images/gis.png";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9",
      logo: gis,
      backgroundColor: '#EAECFC' // 背景颜色值
    };
  },

  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    initChart1() {
      const myChart = echarts.init(this.$refs.myChart1);
      const option = {
        label: { show: true, formatter: "{c}" },
        xAxis: {
          type: "category",
          data: ["周完成率", "月完成率", "季完成率"]
        },
        yAxis: {
          type: "value"
        },
        grid: {
          bottom: "15%" // 调整grid的底部边距
        },
        series: [
          {
            data: [20, 100, 200],
            type: "bar"
          }
        ]
      };

      myChart.setOption(option);
    },
    initChart2() {
      const myChart = echarts.init(this.$refs.myChart2);
      const option = {
        label: { show: true, formatter: "{c}" },
        xAxis: {
          type: "category",
          data: ["工务", "通信", "供电", "综合", "信号"]
        },
        yAxis: {
          type: "value"
        },
        grid: {
          bottom: "15%" // 调整grid的底部边距
        },
        color: "green",
        series: [
          {
            data: [50, 55, 70, 60, 75],
            type: "bar"
          }
        ]
      };

      myChart.setOption(option);
    },
    initChart3() {
      const myChart = echarts.init(this.$refs.myChart3);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: ["工务", "供电", "通信"]
        },
        series: [
          {
            name: "风险",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [320, 302, 301]
          },
          {
            name: "缺陷",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [120, 132, 101]
          }
        ]
      };

      myChart.setOption(option);
    },
    initChart4() {
      const myChart = echarts.init(this.$refs.myChart4);
      const option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          orient: "vertical", // 垂直布局
          left: "left" // 设置图例位置为左侧
        },

        label: {
          show: true,
          position: "outside", // 或者 'inside'，根据需要调整
          formatter: "{c}" // 只显示数量（即值）
        },
        series: [
          {
            name: "巡检任务",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },

            data: [
              { value: 1048, name: "未巡检" },
              { value: 735, name: "巡检中" },
              { value: 580, name: "已完成" }
            ]
          }
        ]
      };

      myChart.setOption(option);
    },
    initChart5() {
      const myChart = echarts.init(this.$refs.myChart5);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: ["信号", "综合服务"]
        },
        label: { show: true, formatter: "{b}: {c}" },
        series: [
          {
            name: "未完成",
            type: "bar",
            stack: "total",
            color: "red",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [100, 200]
          },
          {
            name: "完成",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: [134, 90]
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .responsive-img {
    width: 100%; /* 你可以根据需要调整这个值 */
    height: 100%; /* 保持图片的比例 */
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

